<template>
    <view class="vote-from-item" @click="onChange" :style="{background: checked ? 'rgba(59,117,250,0.08)' : '#F8F8F8'}">
      <view class="item-header">
        <view class="item-check" >
          <view class="relative">
            <view class="w-full h-full absolute" style="left:0;top:0;z-index: 100;"></view>
        <u-checkbox
            :disabled="isVotingInfo.isVoting || isVotingInfo.status!=1 || isRevote"
            :checked="checked"
            :label="label"
            @change="onChange"
            shape="circle"
            size="16"
        />
        </view>
        </view>
        <text class="item-count" :style="{color: checked ? '#3B75FA' : '#0E1529'}">
          {{checked?voteNum:0}}票
          </text>
      </view>
      <view class="item-progress-bg">
        <view class="item-progress-bar" :style="{ width: progressWidth }"></view>
      </view>
      <view class="item-bottom">
        <view class="item-bottom-label">
          投票人数支持率：<text class="item-bottom-value" :style="{color: checked ? '#3B75FA' : '#999999'}">
            {{turnout}}
            </text>
        </view>
        <view class="item-bottom-label">
          投票面积支持率：<text class="item-bottom-value" :style="{color: checked ? '#3B75FA' : '#999999'}">
            {{turnoutNum}}
            </text>
        </view>
      </view>
    </view>
</template>

<script>
export default {
    name: 'VoteFromItem',
    props: {
      checked: Boolean,
      label: String,
      voteNum:Number,
      areaNum:Number,
      optionId:Number,
      optionInfo:{
        deep:true,
        type:Object,
        default:()=>{}
      },
      isVotingInfo:{
        deep:true,
        immediate:true,
        type:Object,
        default:()=>{}
      },
      isRevote:{
        type:Boolean,
        default:false
      }
    },
    watch:{
      isVotingInfo:{
        deep:true,
        immediate:true,
        handler(newVal){
         // 移除这个方法调用，因为checked现在由父组件控制
        },
     
      }
    },
    computed:{
      turnoutNum(){
       
        if(this.checked){
          let voteNum=Number(this.voteNum)
          let zongvoteNum=Number(this.optionInfo.zongvoteNum)
        
          if(zongvoteNum==0){
            return 0+"%"
          }else{
            return   (voteNum/zongvoteNum*100).toFixed(2)+"%"
          }
        }else{
        
          return 0+"%"
        }
      },
      turnout(){
        if(this.checked){
          let voteNum=Number(this.voteNum)
          let zongvoteNum=Number(this.optionInfo.zongvoteNum)
          if(zongvoteNum==0){
            return 0+"%"
          }else{
            return   (voteNum/zongvoteNum*100).toFixed(2)+"%"
          }
        }else{
          return 0+"%"  
        }
     
      },
      progressWidth(){
        if(this.checked){
          let voteNum=Number(this.voteNum)
          let zongvoteNum=Number(this.optionInfo.zongvoteNum)
          if(zongvoteNum==0){
            return 0+"%"
          }else{
            return (voteNum/zongvoteNum*100).toFixed(2)+"%"
          }
        }else{
          return 0+"%"
        }
      }
    },
    methods: {
      // 移除isChecked方法，因为checked现在由父组件通过prop传递
      async onChange() {
      let res=await this.$store.dispatch("community/checkLoginAndBoundHouses")
     
     if(!res) return
        if(this.isVotingInfo.isVoting){
          return
        }
        this.$emit('change')
      }
    }
}
</script>
<style lang="scss" scoped>
.vote-from-item {
  width: 100%;
  padding: 16rpx 20rpx 18rpx 20rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}
.item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.item-check {
  display: flex;
  align-items: center;
  width: 80%;
}
.check-icon {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  border: 2rpx solid #bfc6d1;
  margin-right: 12rpx;
  background: #fff;
  position: relative;
}
.checked {
  border: 2rpx solid #3c7bfa;
  background: #3c7bfa;
}
.checked::after {
  content: '';
  display: block;
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  left: 7rpx;
  top: 7rpx;
}
.item-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #222;
}
.item-count {
    font-weight: 400;
    font-size: 28rpx;
    /* 颜色由绑定style动态控制 */
}
.item-progress-bg {
  width: 100%;
  height: 16rpx;
  background: #DFECF5 ;
  border-radius: 12rpx;
  margin: 26rpx 0 20rpx 0;
  overflow: hidden;
}
.item-progress-bar {
  height: 100%;
  border-radius: 12rpx;
  background: linear-gradient(90deg, #1F87FC  0%, #62B5FF  100%);
}
.item-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 6rpx;
}
.item-bottom-label {
  font-size: 24rpx;
  color: #7a7a7a;
}
.item-bottom-value {
  /* 颜色由绑定style动态控制 */
  font-size: 26rpx;
  font-weight: 500;
  margin-left: 4rpx;
}
</style>
